<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1" />
  <title>我的-邮箱设置</title>

  <link rel="stylesheet" href="../css/mui.min.css" />
  <!--App自定义的css-->
  <link rel="stylesheet" type="text/css" href="../css/app.css" />
  <script src="../js/vue.js"></script>
  <script src="../js/flexible.js"></script>
  <script src="../js/mui.min.js"></script>
  <script src="../js/jquery-3.6.0.min.js"></script>
  <script src="../js/sm2.js"></script>
  <script src="../js/sm3.js"></script>
  <script src="../js/vconsole.min.js"></script>
  <script src="./text.js" type="text/javascript"></script>
  <style>
    /* #app{
        width: 100%;
        height: 100%;
      } */
    .box {
      position: relative;
      width: 100%;
      height: 100%;
      color: #f7faff;
      /* padding-top: 0.25rem; */
    }

    .box .a {
      color: black;
      /* position: absolute; */
      /* top: 0rem; */
      /* left: 0rem; */
      padding: 0.3rem 0.2rem;
      width: 100%;
      background: #fff;
      height: calc(100vh - 2.5rem);
      margin-top: 0.2rem;
    }

    .box .u .c img {
      position: absolute;
      width: 13rem;
      height: 8rem;
      left: 10rem;
    }

    .box .u .d img {
      position: absolute;
      width: 14rem;
      height: 6rem;
      top: 29rem;
      left: -5rem;
    }

    .box .a .e {
      width: 100%;
      margin-top: 0.3rem;
    }

    .box .a .j {
      width: 100%;
      margin-top: 0.3rem;
    }

    .box .a .r {
      /* width: 25%;
        background-color: rgb(25, 179, 182);
        color: #fff;
        border: none; */
      /* position: absolute; */
    }

    /* WebKit browsers */
    ::-webkit-input-placeholder {
      color: #D8E6FE;
    }

    /* Mozilla Firefox 4 to 18 */
    :-moz-placeholder {
      color: #D8E6FE;
      opacity: 1;
    }

    /* Mozilla Firefox 19+ */
    ::-moz-placeholder {
      color: #D8E6FE;
      opacity: 1;
    }

    /* Internet Explorer 10+ */
    :-ms-input-placeholder {
      color: #D8E6FE;
    }

    .mui-toast-container {
      top: 50%
    }

    .a .title {
      font-size: 0.3rem;
      display: inline-block;
      width: 100%;
      color: #333;
      /* text-align: right; */
    }

    .titleInput {
      outline: 0;
      -web-kit-appearance: none;
      -moz-appearance: none;
      font-size: 0.27rem;
      /* height: 0.5rem; */
      border-radius: 4px;
      /* border: 1px solid #d8e6fe; */
      border: none !important;
      border-bottom: 1px solid #d8e6fe !important;
      color: rgb(153, 170, 189);
      /* width: 100%; */
      margin-bottom: 0.2rem;
      -webkit-user-select: auto;
      background-color: transparent !important;
      -moz-user-select: auto;
      padding: 0.1rem 0.1rem;
    }

    /* WebKit browsers */
    ::-webkit-input-placeholder {
      color: #d8e6fe;
    }

    /* Mozilla Firefox 4 to 18 */
    :-moz-placeholder {
      color: #d8e6fe;
      opacity: 1;
    }

    /* Mozilla Firefox 19+ */
    ::-moz-placeholder {
      color: #d8e6fe;
      opacity: 1;
    }

    /* Internet Explorer 10+ */
    :-ms-input-placeholder {
      color: #d8e6fe;
    }

    .mui-btn,
    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"] {
      padding: 0;
    }

    .y {
      background-image: linear-gradient(to right,
          rgb(13, 121, 131),
          rgb(25, 179, 182)) !important;
      color: #fff;
      border: none;
      margin: 0 auto;
      width: 100%;
      text-align: center;
      padding: 0.3rem 0.1rem;
      /* position: fixed; */
      /* bottom: 0; */
      /* left: 0; */
    }

    .wode {
      position: absolute;
      top: 0;
      right: 0;
      width: 80%;
      margin-top: 0.5rem;
    }

    .wode3 {
      position: absolute;
      bottom: 0;
      left: 0;
      margin-bottom: 1rem;
      width: 100%;
    }

    .mui-toast-container {
      top: 30%;
    }

    .disabledB {
      font-size: 0.2rem;
      padding: 0.23rem 0 !important;
      margin-top: 0.15rem !important;
      height: 0.8rem;
    }

    .boxtitle {
      font-weight: 600;
      color: #fff;
      margin-right: 0.5rem;
    }

    .boxTop {
      text-align: center;
      padding: 0.3rem 0;
      background-image: linear-gradient(to right,
          rgb(13, 121, 131),
          rgb(25, 179, 182));
      box-shadow: 4px 4px 4px #ccc;
    }

    .boxyz {
      position: relative;
      width: 100%;
    }

    .r {
      position: absolute !important;
      right: 0;
      top: 0;
      border: 1px solid rgb(81, 156, 156) !important;
      margin-top: 0.2rem;
      color: rgb(81, 156, 156) !important;
      font-weight: bold !important;
      padding: 0 0.2rem !important;
    }

    input::-webkit-input-placeholder {
      color: rgb(151, 168, 197);
    }

    a {
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="boxTop">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @click="home"></a>
      <span class="boxtitle">邮箱设置</span>
    </div>
    <!-- <img src="../image/wode.png" alt="" class="wode" />
    <img src="../image/wode3.png" alt="" class="wode3" /> -->
    <div style="padding: 0 0.2rem">
      <div class="a">
        <div class="">
          <p class="title">内网邮箱</p>
          <input type="text" placeholder="请输入内网邮箱" class="j titleInput" v-model="toMail" />
        </div>
        <div class="uldisplay1">
          <span class="title"> 验证码</span>
          <div class="boxyz">
            <input type="text" v-model="verificationNum" class="e titleInput" placeholder="请输入验证码" />
            <input v-show="sendAuthCode1" type="button" value="获取验证码" class="r titleInput" style="height: 0.8rem"
              @click="verification " />
            <button v-show="!sendAuthCode1" type="button" disabled class="r titleInput disabledB">
              {{time1}}秒后重新发送
            </button>
          </div>
          <!-- <p style="width: 25%"></p> -->
        </div>
        <div style="
              padding: 0 0.2rem;
              position: fixed;
              left: 0;
              bottom: 0;
              width: 100%;
            ">
          <p class="btn titleInput y" @click="btn">确认设置</p>
        </div>
      </div>
    </div>
  </div>
</body>

<script>
  new Vue({
    el: ".box",

    data() {
      return {
        toMail: "",
        verificationNum: "",
        sendAuthCode1: true,
        time1: 90,
      };
    },
    methods: {
      // 校验邮箱格式
      verification() {
        if (this.toMail == "") {
          return mui.toast("内网邮箱不能为空", {
            duration: "long",
            type: "div",
          });
        } else if (this.toMail.indexOf(" ") != -1) {
          return mui.toast("内网邮箱不能含有空格", {
            duration: "long",
            type: "div",
          });
        } else {
          const mailLast = this.toMail.substring(this.toMail.length - 11, this.toMail.length)
          const mailMiddle = this.toMail.indexOf("@");
          if (mailMiddle != -1 && isFlag == true) {
            this.checkVerification()
          } else if (mailMiddle != -1 && mailLast == 'sgcc.com.cn' && isFlag == false) {
            this.checkVerification()
          } else {
            return mui.toast("内网邮箱格式不正确", {
              duration: "long",
              type: "div",
            });
          }
        }
      },
      // 发送验证码
      checkVerification() {
        userId = sessionStorage.getItem("userId");
        orgId = sessionStorage.getItem("unitId");
        if (sessionStorage.getItem("iscp_port")) {
          iscp_port = sessionStorage.getItem("iscp_port");
        } else {
          iscp_port = "";
        }
        let timestamp = new Date().getTime() + ""
        let data = {
          userId: userId,
          orgId: orgId,
          mail: this.toMail,
          timestamp: timestamp,
        }
        data = JSON.stringify(data);
        let AuthenticationSession = sessionStorage.getItem("Authentication");
        let sign = sm3(data);
        $.ajax({
          method: "POST", // 请求方式
          url: localUrlLink + iscp_port + "/document/email/verCode", //请求后台地址
          dataType: "json",
          data: data,
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
            Authentication: AuthenticationSession,
            sign: sign,
            timestamp: timestamp,
          },
          success: (res, txt, xhr) => {
            if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
              let Authentication = xhr.getResponseHeader("Authentication")
              if (res.code == 200) {
                if (Authentication) {
                  this.sendAuthCode1 = false;
                  this.time1 = 90;
                  const timetimer1 = setInterval(() => {
                    this.time1--;
                    if (this.time1 <= 0) {
                      this.sendAuthCode1 = true;
                      clearInterval(timetimer1);
                    }
                  }, 1000);
                  sessionStorage.setItem("Authentication", Authentication);
                  mui.toast('验证码已发送至内网邮箱！', {
                    duration: 'long',
                    type: 'div'
                  })
                  addOperator(4, 6, "发送验证码", 1, 1, "发送验证码成功");
                } else {
                  mui.toast('令牌校验失败', {
                    duration: 'long',
                    type: 'div'
                  })
                }
              } else {
                mui.toast(res.resultValue, {
                  duration: 'long',
                  type: 'div'
                })
                addOperator(4, 6, "发送验证码", 1, 0, "发送验证码失败");
              }
            } else {
              mui.toast('完整性校验失败', {
                duration: 'long',
                type: 'div'
              })
            }
          },
          error: function (e) {
            mui.toast("请求异常请稍后再试", {
              duration: 'long',
              type: 'div'
            })
          },
        })
      },
      // 确认设置 调用接口
      btn() {
        userId = sessionStorage.getItem("userId");
        orgId = sessionStorage.getItem("unitId");
        if (sessionStorage.getItem("iscp_port")) {
          iscp_port = sessionStorage.getItem("iscp_port");
        } else {
          iscp_port = "";
        }
        if (this.toMail == "" || this.verificationNum == "") {
          return mui.toast("内网邮箱和验证码不能为空", {
            duration: "long",
            type: "div",
          });
        }
        let data = {
          userId: userId,
          orgId: orgId,
          securityCode: this.verificationNum,
          timestamp: new Date().getTime() + "",
        }
        data = JSON.stringify(data);
        let AuthenticationSession =
          sessionStorage.getItem("Authentication");
        let sign = sm3(data);
        $.ajax({
          method: "POST", // 请求方式
          url: localUrlLink + iscp_port + "/document/email/verifyCode", //请求后台地址
          dataType: "json",
          data: data,
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
            Authentication: AuthenticationSession,
            sign: sign,
          },
          success: (res, txt, xhr) => {
            if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
              let Authentication = xhr.getResponseHeader("Authentication")
              if (res.code == 200) {
                if (Authentication) {
                  sessionStorage.setItem("Authentication", Authentication);
                  addOperator(4, 1, "邮箱设置", 1, 1, '设置邮箱成功');
                  sessionStorage.setItem("toMail", this.toMail);
                  mui.toast("设置成功", {
                    duration: "long",
                    type: "div",
                  })
                  $(location).attr("href", "Home.html");
                }
              } else if (res.code == 500) {
                mui.toast(res.resultValue, {
                  duration: "long",
                  type: "div",
                });
              } else {
                mui.toast(res.resultHint, {
                  duration: "long",
                  type: "div",
                });
                addOperator(4, 1, "邮箱设置", 1, 0, '设置邮箱失败');
              }
            } else {
              mui.toast("完整性校验失败", {
                  duration: "long",
                  type: "div",
                });
            }
          },
        });
      },
      home() {
        $(location).attr("href", "Home.html?file=two");
        // $(location).attr("href", "Home.html?emflag=emflag");
      },
    },
  });
</script>

</html>